<template>
    <div>
      <div class="tipsBg"></div>
      <div class="tipsCon">
        <h2>非常抱歉！输送调度不在服务时间内，</h2>
        <p>此时平台暂不能下输送单，请使用电话方式联系。</p>
        <div><button @click="closeFn()">关闭</button></div>
      </div>
    </div>
</template>
<script>
  export default{
    name: 'off-duty-tips',
    data(){
      return{
      }
    },
    methods:{
      closeFn(){
        this.$emit('close');
      }
    },
    components:{

    }
  }
</script>
<style scoped lang="less">
  .tipsBg {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: rgba(51, 51, 51,.3);
  }
  .tipsCon {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 3;
    margin: -145px 0 0 -350px;
    width: 700px;
    height: 290px;
    border-radius: 8px;
    background-color: #fff;
    h2 {
      height: 90px;
      font-size: 20px;
      line-height: 140px;
      text-align: center;
      color: #666;
      font-weight: normal;
    }
    p {
      font-size: 20px;
      line-height: 60px;
      text-align: center;
      color: #666;
    }
    div {
      text-align: center;
      padding-top: 30px;
    }
    button {
      display: inline-block;
      width: 244px;
      height: 52px;
      line-height: 52px;
      background: none;
      border: 1px solid #c1c1c1;
      border-radius: 6px;
      font-size: 20px;
      color: #666666;
      cursor: pointer;
    }
  }
  @media screen and (max-width: 1200px) {
    .tipsCon {
      margin: -113px 0 0 -280px;
      width: 560px;
      height: 226px;
    }
    .tipsCon h2 {
      height: 80px;
      font-size: 20px;
      line-height: 80px;
    }
    .tipsCon p{
      font-size: 18px;
      line-height: 34px;
    }
    .tipsCon div {
      padding-top: 35px;
    }
    .tipsCon button {
      height: 42px;
      line-height: 42px;
      font-size: 18px;
    }
  }
  @media screen and (max-width: 900px) {
    .tipsCon {
      margin: -69px 0 0 -238px;
      width: 476px;
      height: 138px;
    }
    .tipsCon h2 {
      height: 50px;
      font-size: 18px;
      line-height: 50px;
    }
    .tipsCon p{
      font-size: 16px;
      line-height: 18px;
    }
    .tipsCon div {
      padding-top: 20px;
    }
    .tipsCon button {
      width: 174px;
      height: 32px;
      line-height: 32px;
      font-size: 16px;
    }
  }
</style>
